<!---频道列表-->
<template>
  <div class="communicateListConatiner">
    <CommonBar :options="options"></CommonBar>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
        <!--搜索-->
        <div class="searchtop">
          <div class="content">
            <input type="text" class="inputsearch" placeholder="搜索频道" v-model="searchtext" />
            <van-icon name="search" class="searchicon" @click="search" />
          </div>
        </div>
        <p class="title">我的频道</p>
        <!-- <div class="divheight"></div> -->

        <ul class="communicateUl" v-if="List.length>0">
          <li class="communicateli" @click="toList(item.id)" v-for="item in List" :key="item.id">
            <van-image
              round
              width="40"
              fit="cover"
              height="40"
              :src="pindao"
            />
            <span>{{item.name}}</span>
          </li>
        </ul>
        <div class="noData" v-else>
          <van-image width="163px" height="120px" fit="contain" :src="nochekData" />
          <p>暂无数据 ！</p>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import CommonBar from "../common/commonBar";
import { mapState } from "vuex";
export default {
  data() {
    return {
      nochekData: require("../../../static/image/nochekData.png"),
      pindao:require("../../../static/image/pindao.png"),
      options: {
        type: "icon",
        centerText: "实时对讲",
        iconNname: "wap-home",
        lefttype: "left"
      },
      List: [],
      searchtext: "",
      pageSize: 50,
      pageNumber: 1,
      loading: false,
      finished: false,
      //下拉刷新
      refreshing: false
    };
  },
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  created() {
    var params = {
      token: this.token,
      pageNumber: this.pageNumber,
      pageSize: this.pageSize
    };
    this.GetLeaveList(params);
  },
  methods: {
    //搜索
    search() {
      this.pageNumber = 1;
      this.List = [];
      var params = {
        token: this.token,
        name: this.searchtext,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      };
      this.GetLeaveList(params);
    },
    //下拉刷新
    onRefresh() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.List = [];
      var params = {
        token: this.token,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      };
      this.GetLeaveList(params);
    },
    GetLeaveList(params) {
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });
      this.$http
        .get(
          `${this.$basePath}?service=App.ChannelManage.GetChannelList&api=96`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.refreshing = false;
            console.log("频道列表", res);
            this.List = this.List.concat(res.data.list);
            // if (this.List.length >= res.data.total) {
            //   this.finished = true;
            // }
            // this.loading = false;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    toList(channel_no) {
      this.$router.push({
        //核心语句
        path: "/communicateList", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          channel_no
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/communicate";
</style>